// import { Link } from 'react-router-dom'
// import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select,Popconfirm,message } from 'antd'
// // 时间选择器的汉化语言包
// import locale from 'antd/es/date-picker/locale/zh_CN'
// import { Table, Tag, Space } from 'antd'
// import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
// // import img404 from '../../assets/error'
// // import error from "../../assets/error.png"
// // import { useChannel } from '../../hooks/useChannel'
// const { Option } = Select
// const { RangePicker } = DatePicker
// // import { getArticleListAPI } from '../../apis/arrticle'
// import { useState } from 'react'
// import { useEffect } from 'react'
// // import { deleteArticleAPI } from '../../apis/arrticle'
// import { useNavigate } from 'react-router-dom'
// import { useSearchParams } from 'react-router-dom'
// const Article = () => {
//     // const {article}=useChannel()
//     // 定义枚举状态
//     const status={
//         1:<Tag color="warning">未发布</Tag>,
//         2:<Tag color="success">已发布</Tag>
//     }
//     // 删除文章
//     const confirm= async(data)=>{
// console.log(data.id);
// // 当删除完之后才去调用重新渲染的接口
// // await deleteArticleAPI(data.id)
// setReqData({
//     ...reqData
// })
// message.success('删除成功')

//     }
//     // 调转到编辑页面
//     const navigate=useNavigate()

//       // 准备列数据
//   const columns = [
//     {
//       title: '封面',
//       dataIndex: 'cover',
//       width: 120,
//       render: cover => {
//         return <img src={cover.images[0] || error} width={80} height={60} alt="" />
//       }
//     },
//     {
//       title: '标题',
//       dataIndex: 'title',
//       width: 220
//     },
//     {
//       title: '状态',
//       dataIndex: 'status',
//       render: data => status[data]
//     },
//     {
//       title: '发布时间',
//       dataIndex: 'pubdate'
//     },
//     {
//       title: '阅读数',
//       dataIndex: 'read_count'
//     },
//     {
//       title: '评论数',
//       dataIndex: 'comment_count'
//     },
//     {
//       title: '点赞数',
//       dataIndex: 'like_count'
//     },
//     {
//       title: '操作',
//       render: data => {
//         return (
//           <Space size="middle">
//             {/* 编辑按钮 */}
//             <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={()=>navigate(`/publish?id=${data.id}`)}/>
//            {/* 删除按钮 */}
//              <Popconfirm
//     title="删除文章"
//     description="是否确认删除文章?"
//     onConfirm={()=>confirm(data)}

//     okText="Yes"
//     cancelText="No"
//   >
//     <Button
//               type="primary"
//               danger
//               shape="circle"
//               icon={<DeleteOutlined />}
//             />
//   </Popconfirm>
//           </Space>
//         )
//       }
//     }
//   ]
//   // 准备表格body数据
//   const data = [
//     {
//       id: '8218',
//       comment_count: 0,
//       cover: {
//         images: [],
//       },
//       like_count: 0,
//       pubdate: '2019-03-11 09:00:00',
//       read_count: 2,
//       status: 2,
//       title: 'wkwebview离线化加载h5资源解决方案'
//     }
//   ]
//   // 获取文章列表
//   const [list,setList]=useState([])
//   const [count,setCount]=useState(0)
//     //1.准备接口的参数
//     const [reqData,setReqData]=useState({
//         status:'',
//         channel_id:'',
//         begin_pubdate:'',
//         end_pubdate:'',
//         page:1,
//         per_page:4
//       })
//   useEffect(()=>{
//     // 获取列表数据
//     async function getList (){
//         const res=await getArticleListAPI(reqData)
//         setList(res.data.results)
//         setCount(res.data.total_count)
//        }
//     getList()
//     // 依赖的数据发生变化时候，useeffect内部的逻辑会重新执行
//   },[reqData])
//   //筛选文章功能

// //  获取筛选数据
// const onFinish=(formValue)=>{
//     console.log(formValue.date[0].format('YYYY-MM-DD'));
//     // 用收集到的表单数据重新改变数组触发调用接口获取新数据
//     setReqData({
//         // 先把原来的对象的值解构出来，再修改里面的值
//         ...reqData,
//         channel_id:formValue.channel_id,
//         status:formValue.status,
//         // begin_pubdate:formValue.date[0].format('YYYY-MM-DD'),
//         begin_pubdate:formValue.date[0].format('YYYY-MM-DD'),
//         end_pubdate:formValue.date[1].format('YYYY-MM-DD')
//         // end_pubdate:formValue.date[1].format('YYYY-MM-DD'),
//     })
// }
// // 点击切换页数时
// const onPageChange=(value)=>{
// console.log(value);
// setReqData({
//     ...reqData,
//     page:value
// })
// }
    
//   return (
    
//     <div>
//         {/* 筛选区域 */}
//       <Card
//         title={
//           <Breadcrumb items={[
//             { title: <Link to={'/'}>首页</Link> },
//             { title: '文章列表' },
//           ]} />
//         }
//         style={{ marginBottom: 20 }}
//       >
//         <Form initialValues={{ status: '' }} onFinish={onFinish}>
//           <Form.Item label="状态" name="status">
//             <Radio.Group>
//               <Radio value={''}>全部</Radio>
//               <Radio value={0}>草稿</Radio>
//               <Radio value={2}>审核通过</Radio>
//             </Radio.Group>
//           </Form.Item>

//           <Form.Item label="频道" name="channel_id">
//             <Select
//               placeholder="请选择文章频道"
//             //   defaultValue={article[0]}
            
//               style={{ width: 120 }}
//             >
//                 {article.map(item=><Option key={item.id} value={item.id}>{item.name}</Option>)}
//               {/* <Option value="jack">Jack</Option> */}
             
//             </Select>
//           </Form.Item>

//           <Form.Item label="日期" name="date">
//             {/* 传入locale属性 控制中文显示*/}
//             <RangePicker locale={locale}></RangePicker>
//           </Form.Item>

//           <Form.Item>
//             <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
//               筛选
//             </Button>
//           </Form.Item>
//         </Form>
//       </Card>
//       {/* 文章列表区域 */}
//       {/* <Card title={`根据筛选条件共查询到${count}条结果：`}>
//         <Table rowKey="id" columns={columns} dataSource={list} pagination={
//             {
//                 total: count,
//                 pageSize:reqData.per_page,
//                 onChange:onPageChange
//             }
//         }/>
//       </Card> */}
//     </div>
//   )
// }

// export default Article